<template>
  <div id="app">
    <!-- 登录表单 -->
    <div v-if="!authenticated">
      <h2>登录</h2>
      <form @submit.prevent="login">
        <input type="text" v-model="username" placeholder="用户名">
        <input type="password" v-model="password" placeholder="密码">
        <button type="submit">登录</button>
      </form>
    </div>
    <!-- 用户信息及功能 -->
    <div v-else>
      <h2>用户信息</h2>
      <p>用户名: {{ currentUser.username }}</p>
      <p>权限级别: {{ currentUser.role }}</p>
      <!-- 权限控制 -->
      <div v-if="currentUser.role === 'admin'">
        <h2>患者管理</h2>
        <button @click="fetchPatients">查看患者</button>
        <!-- 显示患者列表 -->
        <div v-if="patients">
          <ul>
            <li v-for="patient in patients" :key="patient.id">
              {{ patient.name }} - {{ patient.age }}
              <button @click="viewPatient(patient)">查看</button>
              <button @click="editPatient(patient)">编辑</button>
              <button @click="deletePatient(patient.id)">删除</button>
            </li>
          </ul>
        </div>
        <!-- 显示患者详细信息 -->
        <div v-if="selectedPatient">
          <h2>患者详情</h2>
          <p>姓名: {{ selectedPatient.name }}</p>
          <p>年龄: {{ selectedPatient.age }}</p>
          <p>血压: {{ selectedPatient.bloodPressure }}</p>
          <p>心率: {{ selectedPatient.heartRate }}</p>
          <!-- 其他信息 -->
          <button @click="editPatient(selectedPatient)">编辑</button>
          <button @click="deletePatient(selectedPatient.id)">删除</button>
        </div>
        <h2>远程监测数据展示</h2>
        <!-- 显示患者健康数据 -->
        <div v-if="selectedPatient">
          <h3>{{ selectedPatient.name }}的健康数据</h3>
          <p>血压: {{ selectedPatient.bloodPressure }}</p>
          <p>心率: {{ selectedPatient.heartRate }}</p>
          <!-- 可以使用图表库展示数据 -->
        </div>
        <h2>预警和提醒</h2>
        <!-- 根据健康数据发送预警和提醒 -->
      </div>
      <button @click="logout">退出登录</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      authenticated: false,
      username: '',
      password: '',
      currentUser: null,
      patients: null,
      selectedPatient: null
    };
  },
  methods: {
    login() {
      // 实现登录逻辑，验证用户身份
      // 如果验证通过，设置authenticated为true，并获取当前用户信息
      this.authenticated = true;
      this.currentUser = { username: this.username, role: 'admin' }; // 假设为管理员
    },
    logout() {
      // 实现退出登录逻辑
      this.authenticated = false;
      this.username = '';
      this.password = '';
      this.currentUser = null;
      this.patients = null;
      this.selectedPatient = null;
    },
    fetchPatients() {
      // 获取患者列表
      this.patients = [
        { id: 1, name: '患者1', age: 55, bloodPressure: '120/80', heartRate: 70 },
        { id: 2, name: '患者2', age: 65, bloodPressure: '130/90', heartRate: 80 }
        // 可以从服务器获取更多患者数据
      ];
    },
    viewPatient(patient) {
      // 查看患者详细信息
      this.selectedPatient = patient;
    },
    editPatient(patient) {
      // 编辑患者信息
      // 这里可以打开一个编辑模态框或者导航到编辑页面
      this.$router.push({ name: 'editPatient', params: { patientId: patient.id } });
    },
    deletePatient(patientId) {
      // 删除患者
      if (confirm('确定要删除该患者吗？')) {
        // 在实际应用中，这里应该发送请求到服务器进行删除操作
        this.patients = this.patients.filter(patient => patient.id !== patientId);
        this.selectedPatient = null;
      }
    }
  }
};
</script>

<style>
#app {
  font-family: Arial, sans-serif;
  text-align: center;

}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
input {
  margin-bottom: 10px;
  padding: 5px;
  width: 200px;
}

h2 {
  margin-bottom: 20px;
  color: #007bff; /* 蓝色标题 */
}
button {
  padding: 5px 10px;
  background-color: #00a99d;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 20px; /* 设置边框半径为20px，使按钮变成椭圆形 */
}


button:hover {
  background-color: #ffc107;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

</style>
